<template>
	<view class="page">
		<view class="menu-box" v-if="classType == 2">
			<view class="menu-item" :class="{ active: item.value === currentMenu }" v-for="item in menuList" :key="item.value"
				@click="handleMenuClick(item)">
				<image :src="`/static/image/teacher/${item.icon}${item.value === currentMenu ? '-active' : ''}.png`"
					mode="aspectFit" style="width: 48rpx; height: 48rpx;">
				</image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="main padding-0">
			<StudentList v-if="currentMenu === 1" :classType="classType" />
			<ClassDetail v-if="currentMenu === 2" />
			<CommonMistake v-if="currentMenu === 3" />
			<DiagnosisReport v-if="currentMenu === 4" />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import StudentList from './components/StudentList.vue';
import ClassDetail from './components/ClassDetail.vue';
import CommonMistake from './components/CommonMistake.vue';
import DiagnosisReport from './components/DiagnosisReport.vue';
const currentMenu = ref(1);//当前菜单

const classType = ref(1);//班级类型

//菜单列表
const menuList = ref([
	{
		name: '考勤',
		value: 1,
		icon: 'icon-classroom-duty'
	}, {
		name: '本班详情',
		value: 2,
		icon: 'icon-classroom-homework'
	},
	{
		name: '共性错题',
		value: 3,
		icon: 'icon-classroom-mistakes'
	},
	{
		name: '诊断日报',
		value: 4,
		icon: 'icon-classroom-daily'
	}
])

const getStudentList = () => {
	uni.request({
		url: '/api/student/list',
		method: 'GET',
		success: (res) => {
			studentList.value = res.data;
		}
	})
}

// 菜单切换
const handleMenuClick = (item) => {
	currentMenu.value = item.value;
}

onLoad((options) => {
	classType.value = options.classType;

	if (classType.value == 2) {
		uni.setNavigationBarTitle({
			title: '周末班：一年级-数学（A）班'
		})
	} else {
		uni.setNavigationBarTitle({
			title: '托管班：一年级（A）班'
		})
	}
})
</script>

<style lang="scss" scoped>
.menu-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: white;
	padding: 24rpx 32rpx;

	.menu-item {
		padding: 24rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		margin-top: 30rpx;
		flex: 1;

		&.active {
			background: #0060E6;
			color: white;
		}
	}
}
</style>
